<template>
    <div class="home-layout">
        <!-- 侧边栏 -->
        <aside class="sidebar" :class="{ collapsed: isSidebarCollapsed }">
            <h4 v-if="!isSidebarCollapsed">后台管理系统</h4>
            <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" background-color="#fbf7f7"
                text-color="#080808" active-text-color="#1abc9c" @select="handleMenuSelect"
                :collapse="isSidebarCollapsed">
                <el-menu-item v-for="item in menuList" :key="item.index" :index="item.index">
                    <el-icon>
                        <component :is="item.icon" />
                    </el-icon>
                    <span v-if="!isSidebarCollapsed">{{ item.title }}</span>
                </el-menu-item>
            </el-menu>
        </aside>
        <main class="main-content" :class="{ 'main-collapsed': isSidebarCollapsed }">
            <div class="login-header">
                <div class="sidebar-toggle" @click="toggleSidebar">
                    <el-tooltip class="box-item" effect="dark" content="折叠菜单栏"
                        placement="bottom-start">
                        <el-button> 
                            <el-icon>
                                <Menu />
                            </el-icon>
                        </el-button>
                    </el-tooltip>
                </div>
                <div class="login-info">
                    <el-dropdown placement="top-start" trigger="click">
                        <el-button>
                            <el-icon>
                                <Avatar />
                            </el-icon> 用户
                        </el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>个人中心</el-dropdown-item>
                                <el-dropdown-item @click="backLogin">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
                <div>
                    <!-- <el-input placeholder="搜索..." v-model="searchQuery" /> -->
                </div>
            </div>
            <div class="header">
                <div v-if="activeMenu === '/home'" class="header-title">首页</div>
                <div v-else-if="activeMenu === '/user'" class="header-title">用户管理</div>
                <div v-else-if="activeMenu === '/role'" class="header-title">角色管理</div>
                <div v-else-if="activeMenu === '/content'" class="header-title">内容管理</div>
                <div v-else class="header-title">请选择左侧菜单</div>
            </div>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-card>
                        <Home v-if="activeMenu === '/home'" />
                        <UserManage v-else-if="activeMenu === '/user'" />
                        <RoleManage v-else-if="activeMenu === '/role'" />
                        <ContentManage v-else-if="activeMenu === '/content'" />
                        <div v-else>请选择左侧菜单</div>
                    </el-card>
                </el-col>
            </el-row>
        </main>
    </div>
</template>
 
<script setup>
import { ref } from 'vue'
import 'element-plus/dist/index.css'
import UserManage from '../components/UserManage.vue'
import RoleManage from '../components/RoleManage.vue'
import ContentManage from '../components/ContentManage.vue'

import Home from '../components/Home.vue'
import { Avatar, Menu, House, User, UserFilled, Document } from '@element-plus/icons-vue'
// 侧边栏折叠功能
import { computed } from 'vue'
const isSidebarCollapsed = ref(false)
function toggleSidebar() {
    isSidebarCollapsed.value = !isSidebarCollapsed.value
}
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

const menuList = [
    { index: '/home', title: '首页', icon: House },
    { index: '/user', title: '用户管理', icon: User },
    { index: '/role', title: '角色管理', icon: UserFilled },
    { index: '/content', title: '内容管理', icon: Document },
]

const activeMenu = ref(menuList[0].index)
const router = useRouter()
function handleMenuSelect(index) {
    activeMenu.value = index
}
function backLogin() {
    ElMessageBox.confirm(
        '确认退出登录吗？',
        '提示！',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '退出成功！'
            })
            router.push('/')
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消退出登录',
            })
        })


}
</script>


<style scoped>
.header {
    height: 40px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    padding-left: 20px;
    position: sticky;
    top: 40px;
    left: 0;
    z-index: 100;
}

.login-header {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #ddd9d9;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 101;
    background: #fff;
    display: flex;
    align-items: center;
    flex-direction: row;
}

.sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    margin-right: 10px;
    color: #1abc9c;
    font-size: 20px;
}

.h3 {
    cursor: pointer;
    padding-top: 10px;
}



.header-title {
    font-size: 15px;
    font-weight: bold;
    color: #1abc9c;
    border-radius: 5px;
    background-color: #fbf7f7;
    width: 80px;
    height: 31px;
    margin-bottom: -10px;
    text-align: center;
    line-height: 31px;
}

.home-layout {
    display: flex;
    height: 100vh;
    border-radius: 10px;
}

.sidebar {
    width: 130px;
    background: #fbf7f7;
    color: #080808;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 100;
    transition: width 0.2s;
}

.sidebar.collapsed {
    width: 50px;
    min-width: 50px;
    align-items: center;
}

.main-content {
    flex: 1;
    padding: 10px;
    background: #ecf0f1;
    margin-left: 130px;
    min-height: 100vh;
    padding-top: 0px;
    transition: margin-left 0.2s;
}

.main-content.main-collapsed {
    margin-left: 50px;
}

/* 去除 element plus 下拉按钮边框 */
:deep(.el-dropdown .el-button) {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
:deep(.sidebar-toggle .el-button) {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
</style>
